<template>
<hr>
{{ count}}
<button @click="setCount">JIA  1</button>
<hr>
姓名：{{otherData.name}}，年龄：{{otherData.age}}，所属地域：{{otherData.address}}
<button @click="changeData">更新数据</button>
<hr>
</template>

<script>
import {
  reactive,
  ref
} from 'vue'
export default {
  name: 'App',
  // 组合API函数都在此使用, 只在初始化时执行一次
  // 如果返回对象, 对象中的属性或方法, 模板中可以直接使用
  setup(){
/**
 *  ref 将一个【基本类型数据】设置为响应式数据
 *    如需变更数据使用xxx.value进行数据设置
 *    在模板中不需要使用XXX.value形式进行展示
 * 
 *  ref也可对复合数据类型进行响应式设置
 */
    let count=ref(0)
    function setCount(){
      console.log('ZHIXNIGN');
      count.value++
    }
    /**
     *  reactive 用于将复合类型数据进行响应式数据设置
     *  返回的对象为Proxy对象是代理对象(otherData)，传入的之位目标对象（obj）
     *  修改值需使用代理对象进行设置
     *  数据的修改若想实现响应式都必须在代理对象中进行操作
     * 
     */
     let obj={
      name:'秦始皇',
      age:2352
    }
    let otherData=reactive(obj)
    const changeData=()=>{
      otherData.name+= '秦朝'
      otherData.age++
      otherData.address='咸阳'
    }
    return{
      count,setCount,otherData,changeData
    }
  }
}
</script>

<style>

</style>
